<template>
  <!-- PV 折线图容器 -->
  <div id="lineChat" class="w-full h-full"></div>
</template>

<script setup>
  import * as echarts from "echarts";
  import { watch, onMounted, onUnmounted } from "vue";

  // 对外暴露的属性值
  const props = defineProps({
    value: {
      // 属性值名称
      type: Object, // 类型为对象
      default: null // 默认为 null
    }
  });

  // 保存图表实例引用
  let myChart = null;

  // 初始化折线图
  function initLineChat() {
    // 避免重复创建图表实例
    if (!myChart) {
      var chartDom = document.getElementById("lineChat");
      if (chartDom) {
        myChart = echarts.init(chartDom);
      } else {
        return;
      }
    }

    var option;

    // 从 props.value 中获取日期集合和 pv 访问量集合
    const pvDates = props.value?.pvDates || [];
    const pvCounts = props.value?.pvCounts || [];

    option = {
      xAxis: {
        type: "category",
        data: pvDates // x 轴数据
      },
      yAxis: {
        type: "value"
      },
      series: [
        {
          data: pvCounts, // 设置 pv 访问量
          type: "line"
        }
      ]
    };

    // 移动到折点上，显示数值
    option.tooltip = { trigger: "axis" };

    option && myChart.setOption(option);
  }

  // 窗口大小变化处理函数
  function handleResize() {
    if (myChart) {
      myChart.resize();
    }
  }

  // 组件挂载完成后初始化
  onMounted(() => {
    // 初始渲染图表
    if (props.value) {
      initLineChat();

      // 添加延迟resize，确保DOM完全渲染后图表能正确显示
      setTimeout(() => {
        if (myChart) {
          myChart.resize();
        }
      }, 100);
    }
    // 添加窗口大小变化监听
    window.addEventListener("resize", handleResize);
  });

  // 组件卸载前清理
  onUnmounted(() => {
    // 移除事件监听
    window.removeEventListener("resize", handleResize);
    // 销毁图表实例
    if (myChart) {
      myChart.dispose();
      myChart = null;
    }
  });

  // 侦听属性, 监听 props.value 的变化，一旦 props.value 发生变化，就调用 initLineChat 初始化折线图
  watch(
    () => props.value,
    () => {
      if (props.value) {
        initLineChat();
      }
    }
  );
</script>
